<template>
  <el-dialog
    :model-value="isVisible"
    :width="props.width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="handleClose"
    :destroy-on-close="true"
  >
    <slot>暂无内容</slot>
    <template #footer v-if="hasFooter">
      <span class="dialog-footer">
        <el-button @click="handleClose" :disabled="props.cancelDisabled">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          :disabled="props.confirmDisabled"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
    default: 800,
  },
  hasFooter: {
    type: Boolean,
    default: true,
  },
  confirmDisabled: {
    type: Boolean,
    default: false,
  },
  cancelDisabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:visible", "handleConfirm"]);

const isVisible = ref(props.visible);

watch(
  () => props.visible,
  (value) => {
    isVisible.value = value;
  }
);
watch(isVisible, (value) => {
  emit("update:visible", value);
});

const handleConfirm = () => {
  if (props.confirmDisabled) return;
  emit("handleConfirm");
};

const handleClose = () => {
  if (props.cancelDisabled) return;
  isVisible.value = false;
};
</script>

<style scoped></style>

